<template>
  <div class="operator" v-if="!!model">
    <yzOperand
      v-model="model.source"
      :op="model.op"
      :labelOptions="labelOptions"
    ></yzOperand>
    <q-select
      v-model="model.op"
      :options="conditionOptionsData"
      dense
      options-dense
      lazy-rules
      class="form-select-condition"
      emit-value
      map-options
      outlined
      :rules="[
        (val) => {
          let msg = checkNotNull(val)
          if (msg.length > 0) {
            return msg
          }
          return null
        }
      ]"
    >
      <template v-slot:no-option>
        <div class="no-option" />
      </template>
    </q-select>
    <yzOperandEditor
      v-model="model.target"
      :op="model.op"
      :labelOptions="labelOptions"
    ></yzOperandEditor>
    <!-- <label>&&</label> -->
  </div>
</template>
<script>
import YzOperator from 'src/boot/common/yzOperator'
import yzOperandEditor from './yz-operand-editor.vue'
import yzOperand from './yz-operand.vue'
export default {
  name: 'yz-operator',
  props: {
    model: {
      type: YzOperator,
      require: true
    },
    labelOptions: {
      type: Array,
      require: true
    }
  },
  data () {
    return {
      conditionOptions: [
        { label: '大于', value: '>' }, // b
        { label: '大于等于', value: '>=' }, // b
        { label: '小于', value: '<' }, // a
        { label: '小于等于', value: '<=' }, // a
        { label: '等于', value: '==' }, // a
        { label: '不等于', value: '!=' } // a
      ],
      dataType: null
    }
  },
  model: {
    prop: 'model',
    event: 'submit'
  },
  computed: {
    conditionOptionsData () {
      // 9 string 2 char
      if (this.dataType === 9 || this.dataType === 2) {
        if (!['==', '!='].includes(this.model.op)) {
          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
          this.model.op = '=='
        }
        return [
          { label: '等于', value: '==' },
          { label: '不等于', value: '!=' } // a
        ]
      }
      return this.conditionOptions
    },
    opDisplayString () {
      return YzOperator.getOpDisplayString(this.model.op)
    },
    cssClass () {
      if (this.selected) {
        return 'selected'
      }
      return ''
    }
  },
  components: {
    yzOperandEditor,
    yzOperand
  },
  watch: {
    // model 发生变化即向上传递
    model: {
      deep: true,
      handler (val) {
        this.$emit('submit', val)
      }
    }
  },
  methods: {
    checkNotNull (val) {
      if (val === null || val === undefined || val.toString() === '') {
        return '不能为空'
      }
      return ''
    },
    dataTypeChange (dataType) {
      this.dataType = dataType
    }
  }
}
</script>

<style scoped lang="scss">
.operator {
  display: flex;
  flex-wrap: wrap;
}
</style>
